<template>
  <div class="bodys">
    <Header :headerTxt="$t('ws_assets.transfer')" :showBack="true"></Header>
		<div class= "content">
			<div class="touse">
				<img src="../../assets/icon-persons.png">
				<input name="name" v-model="touser" type="number" :placeholder="$t('ws_assets.nnum')" >
			</div>
			<div class="mon">
				<div class="tt">{{$t('ws_assets.amo')}}</div>
				<div class="mm">
				￥
				<input name="num" v-model="money" type="number" :placeholder="$t('ws_transition.tras')">
				</div>
        <div class="remark">{{$t('ws_assets.ba')}} {{balance.account}}</div>
			</div>
		</div>
    <el-button class="extract" type="primary" @click="zz">{{$t('ws_assets.transfer')}}</el-button>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { hold } from '@/api/getData';
import { zz } from '@/api/getData'; 
export default {
  data() {
    return {
      user:JSON.parse(sessionStorage.getItem("user")),
      balance: '',
      to: "18357138791",
      money:'',
      touser:''

    };
  },
  methods: {
        hold(){
        let data = {
            user_id:this.user.user_id,
            }
        hold(data).then(res => {
            this.balance = res.data.result;
        })           
        },

        zz(){
          let data= {
            fromid:this.user.user_id,
            toid:this.touser,
            money:this.money,
          }
          zz(data).then(res=>{
            if(res.data.msg==200){
                    this.$message({
                      type: 'success',
                      message:  res.data.result,
                      duration: 1500,
                      showClose: true
                    });
            }else{
                    this.$message({
                      type: 'error',
                      message: res.data.result,
                      duration: 1500,
                      showClose: true
                    });
            }
          })
        }
  },
  mounted() {
    this.hold();
  },
  components: { Header },
};
</script>
<style lang="stylus" scoped>
.bodys {
  background: #F8F8FF;
  height: 100vh;
  width: 100vw;
  overflow hidden;

}
.content {
  width: 100vw;
  background: #fff;
  font-size: 0.3rem;
  padding-top:5vh;
}

.extract{
    display:block;
    width:90%;
    margin : 1rem auto 0 auto;
}
	.touse{
    margin-top: 4vh;
		background-color: white;
	}
	.touse img{
		float:left;
		padding-top:15px;
		margin-left: 5%;
	}
	.touse input {
		float: left;
		margin-top: 14px;
		height: 35px;
		padding-left: 15px;
		width: 80%;
		outline:none;
		border:none;
		font-size:17px
	}
	.mon{
		background-color:white;
		height:125px;
		margin-top:11vh;
		text-align:left;
	}
	.tt{
		float: left;
		padding: 10px 0 0 5%;
		width:100%;
		margin-bottom:15px;
	}
	.mm{
		margin-top: 23px;
		font-size: 20px;
		padding-left: 5%;
		margin-bottom:15px;
	
	}
	.mm input{
		outline:none;
		border:none;
    font-size: 0.36rem;
	}
	.remark{
		color:gainsboro;
		padding-left:5%;
		font-size: 15px;
	}
</style>